var formCols = [{"eType":"Input","label":"姓名","prop":"user_name","id":"Input_307","placeholder":"请输入您的姓名","errorMsg":"请输入正确的姓名"},{"eType":"Input","label":"手机","prop":"phone","id":"Input_726","placeholder":"请输入您的手机","errorMsg":"请输入正确的手机"},{"eType":"Input","label":"邮箱","prop":"email","id":"Input_4","placeholder":"请输入您的邮箱","errorMsg":"请输入正确的邮箱"},{"eType":"Radio","label":"性别","prop":"sex","id":"Radio_403","options":[{"label":"男","value":1},{"label":"女","value":2}],"errorMsg":"请选择正确的性别"},{"eType":"Input","label":"地理位置","prop":"location","id":"Input_458","placeholder":"请输入您的地理位置","errorMsg":"请输入正确的地理位置"},{"eType":"Input","label":"企业地址","prop":"firm-addr","id":"Input_630","placeholder":"请输入您的企业地址","errorMsg":"请输入正确的企业地址"}]
var formData = {
    sex: ''
}
var bodyDom = document.querySelector('body')
var wcFormDom = '';
function init() {
    var headDom = document.querySelector('head')
    var createLink = document.createElement('link')
    createLink.rel = 'stylesheet'
    createLink.href='http://192.168.4.195:8088/makeForm.css'
    headDom.appendChild(createLink)
   
    var getUrlParam = document.getElementById('generateForm').src.split('?')[1]
    console.log(getUrlParam);

    createForm()

    var wcInput = document.querySelectorAll('.wc-input')
    var radioInput= document.querySelectorAll('.wc-radio-original')
    wcFormDom = document.querySelector('.wc-form')
    for (var i = 0; i < wcInput.length; i++) {
        var wcInputItem = wcInput[i];
        wcInputItem.addEventListener('blur', function(e) {
            e.stopPropagation()
            inputTextError(getErrorMsg(this),this)
        })
        wcInputItem.addEventListener('input', function(e) {
            e.stopPropagation()
           this.value = this.value.trim()
           formData[this.name] = this.value
        })
    }

    for (var i = 0; i < radioInput.length; i++) {
        var radioInputItem = radioInput[i]
        radioInputItem.addEventListener('click', function(e) {
            e.stopPropagation()
            formData.sex = this.checked ? this.value : ''
            inputCheck('请选择性别', this)
        })
    }

    //提交
    var submit = document.querySelector('.wc-button')
    submit.addEventListener('click', function(e) {
        e.stopPropagation()
        for (var i = 0; i < wcInput.length; i++) {
            var wcInputItem = wcInput[i]
            inputTextError(getErrorMsg(wcInputItem),wcInputItem)
        }

        !formData.sex && inputCheck('请选择性别', radioInput[0])
        for (const key in formData) {
            if(!formData[key]) return
        }
       console.log(formData);
        console.log('提交数据');
    })

    //收起
    var packUp = document.querySelector('.wc-form-header span')
    var spread = document.querySelector('.wc-form-header p')
    var formContentDom = document.querySelector('.wc-form-content')
   
    packUp.addEventListener('click',function(e) {
        e.stopPropagation()
        formContentDom.classList.add('hidden-form-content')
        wcFormDom.classList.add('hidden-wc-form')
    })
    spread.addEventListener('click',function(e) {
        e.stopPropagation()
        formContentDom.classList.remove('hidden-form-content')
        wcFormDom.classList.remove('hidden-wc-form')
        if(wcFormDom.offsetTop + 442 > window.innerHeight) {
            wcFormDom.style.top =''
            wcFormDom.style.bottom = '10px'
        }
    })
    drag()
}

init()

function createForm() {
    var createFormDom = document.createElement('form')
    createFormDom.className = 'wc-form'
    var title = '表单标题'
    var formItem = ''

    for (let i = 0; i < formCols.length; i++) {
        var cols = formCols[i];
        if(cols.eType === 'Input') {
            formItem += "<div class='wc-form-item'>"+
                        "<p class='wc-form-item-label'>"+cols.label+"<span>*</span></p>"+
                        "<input class='wc-input' name="+cols.prop+" type='text' placeholder="+cols.placeholder+" />"+
                    "</div>"
        }

        if(cols.eType === 'Radio') {
            formItem += "<div class='wc-form-item'>"+
                        "<p class='wc-form-item-label'>性别 <span>*</span></p>"+
                        "<label class='wc-radio' for='man'>"+
                        "<input type='radio' aria-hidden='true' class='wc-radio-original' id='man' name='sex' autocomplete='off' value='1' />"+
                        "<span class='wc-radio-inner'></span>"+
                            "<span>男</span>"+
                        "</label>"+
                        "<label class='wc-radio' for='girl'>"+
                        "<input type='radio' aria-hidden='true' class='wc-radio-original' id='girl' name='sex' autocomplete='off' value='2' />"+
                        "<span class='wc-radio-inner'></span>"+
                            "<span>女</span>"+
                        "</label>"+
                    "</div>"
        }

    }
    var formContent = "<div class='wc-form-header'>"+
                        "<h1>"+title+"</h1>"+
                        "<span>x</span>"+
                        "<p></p>"+
                      "</div>"+
                        "<div class='wc-form-content'><p class='wc-form-msg'>表达介绍表达介绍表达介绍表达介绍表达介绍表达介绍表达介绍表达介绍</p>"+
                        formItem+
                        "<div class='wc-button'>提交</div></div>"
    createFormDom.innerHTML = formContent
    bodyDom.appendChild(createFormDom)
}

function inputTextError(msg, ele) {
    var wcInputParentDom = ele.parentNode
    var findClass = wcInputParentDom.lastChild.classList
    var isRemove = findClass ? findClass.contains('wc-form-item-error') : false
    if(ele.value) {
        ele.classList.remove('is-error')
        isRemove && wcInputParentDom.lastChild.remove()
    } else {
        !isRemove && createErrorMsg(msg,wcInputParentDom)
        ele.classList.add('is-error')
    }
}

function inputCheck(msg,ele) {
    var radioParent = ele.parentNode.parentNode
    var findClass = radioParent.lastChild.classList
    var isAddError = findClass ? findClass.contains('wc-form-item-error') : false
    if(ele.checked) {
        isAddError && radioParent.lastChild.remove()
    } else {
        !isAddError && createErrorMsg(msg,radioParent)
    }
}

function getErrorMsg(ele) {
    var msg = ''
    for (var y = 0; y < formCols.length; y++) {
        if(formCols[y].prop == ele.name){
            msg = formCols[y].errorMsg
            break;
        }
    }
    return msg
}

function createErrorMsg(msg, ele) {
    var createDivs = document.createElement('div')
    createDivs.innerText = msg
    createDivs.className = 'wc-form-item-error'
    ele.appendChild(createDivs)
}
 // 拖拽函数
function drag(){
    var moveDom = document.querySelector('.wc-form-header')
    moveDom.addEventListener('mousedown',function(event){
        var event = event || window.event  //兼容IE浏览器
        event.stopPropagation()
        if(typeof wcFormDom.setCapture !== 'undefined'){
            wcFormDom.setCapture() 
        }
        var diffX = event.clientX - wcFormDom.offsetLeft
        var diffY = event.clientY - wcFormDom.offsetTop
        // 鼠标移动，修改定位
        document.onmousemove = function(e){
            var events = e || window.event
            events.stopPropagation()
            var moveX = events.clientX - diffX
            var moveY = events.clientY - diffY
            if(moveX < 0){
                moveX = 0
            }else if(moveX > window.innerWidth - wcFormDom.offsetWidth){
                moveX = window.innerWidth - wcFormDom.offsetWidth
            }
            if(moveY < 0){
                moveY = 0
            }else if(moveY > window.innerHeight - wcFormDom.offsetHeight){
                moveY = window.innerHeight - wcFormDom.offsetHeight
            }
            wcFormDom.style.left = moveX + 'px'
            wcFormDom.style.top = moveY + 'px'
            wcFormDom.style.bottom = ''
           
        }
        document.onmouseup = function(event){
            event.stopPropagation()
            this.onmousemove = null
            this.onmouseup = null
            // 适配低版本 ie
            if(typeof wcFormDom.releaseCapture!='undefined'){  
                wcFormDom.releaseCapture()  
            } 
        }
    })
}